import React, { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { NavBar, Tag, Button } from "antd-mobile";
import img from "../../assets/1.png";
import "./index.scss";

const Index: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [gzflag, setgzflag] = useState(false);
  const [data, setData] = React.useState(location.state);
  console.log(data);
  const kg = () => {
    setgzflag(!gzflag);
  };
  const back = () => {
    navigate(-1);
  };
  return (
    <div className="box">
      <header>
        <NavBar onBack={back}>在线咨询</NavBar>
      </header>
      <div id="mp4">
        <video controls id="video1" autoPlay>
          <source
            src="https://lf9-static.bytednsdoc.com/obj/eden-cn/uhbfnupkbps/video/earth_v6.mp4"
            type="video/mp4"
          />
        </video>
      </div>
      <main>
        <dl className="dls">
          <dt>
            <img src={img} alt="" />
          </dt>
          <dd>
            <div>
              <p>{data.name}</p>
              <p>
                {data.level}&emsp;{data.Department}
              </p>
              <p>
                {data.yi}
                <Tag color="#ffe1e1">三甲</Tag>
              </p>
            </div>
          </dd>

          {gzflag ? (
            <Button className="btnyes" onClick={() => kg()}>
              <span className="wgzy">已关注</span>
            </Button>
          ) : (
            <Button className="btnno" onClick={() => kg()}>
              <span className="wgz">+关注</span>
            </Button>
          )}
        </dl>
        <div className="title">
          <div className="one">
            <p>暂无</p>
            <p>挂号量</p>
          </div>

          <div className="one">
            <p>7</p>
            <p>咨询量</p>
          </div>

          <div className="one">
            <p>100%</p>
            <p>好评率</p>
          </div>

          <div className="one">
            <p>25</p>
            <p>粉丝数</p>
          </div>
        </div>
        <p>擅长：阿是垦利街道卡洛斯京东卡收垃圾大阿萨达四大</p>
        <div className="content">
          <span>阿是垦利街道卡洛斯京东卡收垃圾大阿萨达四大</span>
          <span>查看全部</span>
        </div>
        <div className="button">
          <div>
            <p>
              <img src="../../../public/image/yygh.png" />
            </p>
            <p>预约挂号</p>
            <p>未开通</p>
          </div>
          <div>
            <p>
              <img src="../../../public/image/zxzx.png" />
            </p>
            <p>在线咨询</p>
            <p>1对1咨询</p>
          </div>
          <div>
            <p>
              <img src="../../../public/image/srys.png" />
            </p>
            <p>私人医生</p>
            <p>未开通</p>
          </div>
          <div>
            <p>
              <img src="../../../public/image/zkfw.png" />
            </p>
            <p>专科服务</p>
            <p>未开通</p>
          </div>
        </div>
      </main>
      <h2 className="cca">我主讲的课程</h2>
      <p>爱自己绽青春</p>
      <div className="mp4s">
        <video controls id="video1">
          <source
            src="https://lf9-static.bytednsdoc.com/obj/eden-cn/uhbfnupkbps/video/earth_v6.mp4"
            type="video/mp4"
          />
        </video>
      </div>
      <p>自我调试 笑对生活</p>
      <div className="mp4s">
        <video controls id="video1">
          <source
            src="https://lf9-static.bytednsdoc.com/obj/eden-cn/uhbfnupkbps/video/earth_v6.mp4"
            type="video/mp4"
          />
        </video>
      </div>
      <p>未雨绸缪守护健康</p>
      <div className="mp4s">
        <video controls id="video1">
          <source
            src="https://lf9-static.bytednsdoc.com/obj/eden-cn/uhbfnupkbps/video/earth_v6.mp4"
            type="video/mp4"
          />
        </video>
      </div>
      <p>宫颈癌疫苗二三事</p>
      <div className="mp4s">
        <video controls id="video1">
          <source
            src="https://lf9-static.bytednsdoc.com/obj/eden-cn/uhbfnupkbps/video/earth_v6.mp4"
            type="video/mp4"
          />
        </video>
      </div>
    </div>
  );
};

export default Index;
